<template>
  <div class="web">
    <div class="webLeft">
      <el-row>
        <el-col :span="12">
          <el-menu style="width:208px;" :default-active="menuFlag" class="el-menu-vertical-demo"
            active-text-color="rgba(3,167,128,1)" :default-openeds="openeds">
            <el-submenu v-for="(item, index) in menuList" :key="index" :index="item.id"
              style="width:208px;border-right:1px solid #eee;">
              <div class="redDots" v-if="$store.getters.getshowFlag == true"></div>
              <template slot="title">
                <i class="el-icon-menu"></i>
                {{ item.name }}
              </template>
              <el-menu-item style="width:208px;border-right:1px solid #eee;" :key="j" :index="i.id"
                v-for="(i, j) in item.children" @click="handleMenu(i.id)" v-show="i.flag == true">{{
                  i.name
                }}</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <!-- 右侧表格 -->
    <div class="webRight">
      <station :menuFlag="menuFlag" v-if="menuFlag == '14'" @toMember="toMember"/>
      <functionalGroupManagement v-if="menuFlag == '16'" @toMember="toMember"/>
      <employeeContact v-if="menuFlag == '15'"/>
      <staffInfo v-if="menuFlag == '11'" />
      <contractMent v-if="menuFlag == '12'" />
      <leaveMent v-if="menuFlag == '13'" />
      <member v-if="menuFlag == '20'" :znzId="znzId" @toBack="toBack"/>
    </div>
  </div>
</template>
<script>
import staffInfo from "./staffInfo"; //员工信息管理
import contractMent from "./contractMent"; //劳动合同管理
import leaveMent from "./leaveMent"; //员工离职管理
import station from "../company/station";//岗位管理
import member from "../company/member";//职能组管理
import functionalGroupManagement from "../company/functionalGroupManagement";
import employeeContact from "../company/employeeContact";
// import menuleft from '@/components/menuItem/menuleft.vue'
import { getRoleResourceList, selectContract } from "@/service/Api.js"; //接口
export default {
  components: { staffInfo, contractMent, leaveMent, station, member,functionalGroupManagement,employeeContact },
  name: "personnelMent",
  data() {
    return {
      openeds: ["1"],
      menuList: [
        {
          name: "人事管理",
          id: "1",
          children: [
            {
              name: "岗位管理",
              id: "14",
              flag: false,
            },
            {
              name: "员工通讯录",
              id: "15",
              flag: false,
            },
            {
              name: "职能组管理",
              id: "16",
              flag: false,
            },
            {
              name: "员工信息管理",
              id: "11",
              flag: false,
            },
            {
              name: "劳动合同管理",
              id: "12",
              flag: false,
            },
            {
              name: "员工离职管理",
              id: "13",
              flag: false,
            },
          ],
        },
      ],
      menuFlag: "",
      znzId: '',
    };
  },
  watch: {
    menuFlag(val) { 
      console.log(val);
    },
  },
  created() {
    this.getUserOnelist();
    // this.getRedstatus();
  },
  methods: {
    toMenu(id) {
      //id判断每个菜单所显示内容
      this.$emit("handleMenu", id);
    },
    toMember(val){
      this.menuFlag = "20";
      this.znzId = val;
    },
    toBack(){
      this.menuFlag = "16";
    },
    handleMenu(id) {
      this.menuFlag = id;
    },
    //获取红点标识
    // getRedstatus() {
    //   let date = {
    //     pn: 1,
    //     ps: 10,
    //   };
    //   selectContract(date).then((res) => {
    //     if (res.code == 0) {
    //       // console.log(res.data.ifRed)
    //       this.$store.dispatch("add_flag", res.data.ifRed);
    //     }
    //   });
    // },
    // 获取当前角色下的二级列表
    getUserOnelist() {
      this.checkTree = [];
      let userInfo = sessionStorage.getItem("userInfo");
      this.roleId = JSON.parse(userInfo).roleId;
      getRoleResourceList(this.roleId).then((res) => {
        // console.log(res)
        if (res.code == 0) {
          if (res.data.length > 0) {
            let arr = [];
            res.data.forEach((element, index) => {
              arr.push(element.resourceId);
            });
            // console.log(arr);
            this.checkTree = arr;
          } else {
            this.checkTree = [];
          }
        }
        console.log(this.checkTree)
        for (var i = 0; i <= this.checkTree.length; i++) {
          if (this.checkTree[i] == 13) {
            this.menuList[0].children[0].flag = true;
          }
          if (this.checkTree[i] == 14) {
            this.menuList[0].children[1].flag = true;
          }
          if (this.checkTree[i] == 15) {
            this.menuList[0].children[2].flag = true;
          }
          if (this.checkTree[i] == 16) {
            this.menuList[0].children[3].flag = true;
          }
          if (this.checkTree[i] == 17) {
            this.menuList[0].children[4].flag = true;
          }
          if (this.checkTree[i] == 18) {
            this.menuList[0].children[5].flag = true;
          }
        }
        let result = this.checkTree.some((item) => {
          return item == 15;
        });
        if (result == false) {
          // let result2 = this.checkTree.some((item) => {
          //   return item == 13;
          // });
          // if (result2 == true) {
          //   this.menuFlag = "13";
          // } else {
          //   this.menuFlag = "13";
          // }
          this.menuFlag = "15";
        } else {
          this.menuFlag = "14";
        }
      });
    },
  },
};
</script>

<style scoped>
#menu {
  position: fixed;
}

.webLeft>>>.el-submenu.is-active .el-submenu__title {
  border-right: 1px solid #eee !important;
}

.redDots {
  height: 7px;
  width: 7px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 72px;
  left: 178px;
  z-index: 999;
}
</style>
